import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:number_spark_flutter/style/ns_style.dart';
import 'package:number_spark_flutter/widgets/brick/ns_brick.dart';

import 'ns_single_logic.dart';

class NSSinglePage extends StatelessWidget {
  NSSinglePage({Key? key}) : super(key: key);

  final logic = Get.put(NSSingleLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          const NSImage(
            assetImage: 'img_bg_main.png',
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.fill,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              NSImage(
                margin: EdgeInsets.only(top: ScreenUtil().statusBarHeight + 14.w, left: 20.w),
                assetImage: 'icon_red_close.png',
                width: 40.w,
                onTap: () {
                  Get.back();
                },
              ),
              Stack(
                alignment: Alignment.topCenter,
                children: [
                  const NSImage(
                    assetImage: 'img_bg_single.png',
                    width: double.infinity,
                  ),
                  GetBuilder<NSSingleLogic>(builder: (logic) {
                    return Column(
                      children: [
                        GetBuilder<NSSingleLogic>(
                          builder: (logic) {
                            return NSText(
                              margin: EdgeInsets.only(top: 132.w),
                              text: '${logic.countDown}S',
                              textColor: Colors.black,
                              fontSize: 24.sp,
                              fontFamily: 'LilitaOne-Regular',
                              marginDrawable: 8.w,
                              startDrawable: NSImage(
                                assetImage: 'icon_timer.png',
                                width: 32.w,
                              ),
                            );
                          },
                          id: idCountDown,
                        ),
                        NSText(
                          margin: EdgeInsets.only(top: 47.w),
                          text: logic.question.expression,
                          textColor: kAppColor('#7131F2'),
                          fontFamily: 'LilitaOne-Regular',
                          fontSize: 40.sp,
                        ),
                        GridView.builder(
                            shrinkWrap: true,
                            padding: EdgeInsets.only(left: 52.w, right: 52.w, top: 80.w),
                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, crossAxisSpacing: 18.w, mainAxisSpacing: 10.w, childAspectRatio: 128 / 94),
                            itemBuilder: (context, index) {
                              return NSStack(
                                alignment: Alignment.center,
                                children: [
                                  NSImage(
                                    assetImage: 'img_bg_answer_btn.png',
                                    width: 128.w,
                                  ),
                                  NSText(
                                    text: logic.question.options[index].toString(),
                                    textColor: kAppColor('#7131F2'),
                                    fontFamily: 'LilitaOne-Regular',
                                    fontSize: 32.sp,
                                  ),
                                ],
                                onTap: () {
                                  logic.doClickOption(logic.question.options[index]);
                                },
                              );
                            },
                            itemCount: logic.question.options.length)
                      ],
                    );
                  },id: idQuestion,)
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}
